<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tabs选项卡</title>

  <!-- 引入js文件，有顺序限制 -->
  <script type="text/javascript" src="../js/jquery.min.js"></script>
  <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
  <!-- 引入css文件，不限顺序 -->
   <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
    
    <!-- 所有的css文件和的有的js文件位置不限 -->
    
</head>
<body>    
	<div 
	id="tabs" 
	class="easyui-tabs" 
	style="width:500px;height:250px;"
	data-options="tools:[{
		iconCls:'icon-add',
		handler:function(){
			alert('添加')
		}
	},
	{
		iconCls:'icon-save',
		handler:function(){
			alert('保存')
		}
	}]">   
    <div title="Tab1" style="padding:20px;display:none;">   
        tab1    
    </div>   
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
        tab2    
    </div>   
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
        tab3    
    </div>   
</div>  

</body>  
</html>